<template>
  <div>
    <Header></Header>
    <div class="mybody clearfix">
      <div class="postArea">
        <ul class="invitation">
          <li class="inv-item">
            <div class="hd">
              <img
                class="inv-img fl"
                :src="article.avatarUrl"
                alt=""
                @click="toHomePage(article.userId, article.identity)"
              />
              <span class="fl">{{ article.nickName }}</span>
              <!-- 用于认证的标签 -->
              <div
                class="fl clearfix"
                v-show="article.identity == 1"
                style="line-height: 40px"
              >
                <img
                  class="fl"
                  src="@/assets/认证.png"
                  style="width: 20px; margin: 10px"
                  alt=""
                />
              </div>
              <span class="time fl">{{ article.postTime }}</span>
              <span
                class="classify fl"
                v-for="_tag in article.tag"
                :key="_tag"
                >{{ _tag }}</span
              >
              <span id="question" class="fl" v-show="article.questionType == 1"
                >问题贴</span
              >
              <h6 class="teacherShareTag fr" v-show="true">
                {{ article.pBoardName }}
              </h6>
            </div>
            <div class="bd">
              <a href="#"
                ><h3>{{ article.title }}</h3></a
              >
              <!-- <p>
                {{ article.content }}
              </p> -->
              <div v-html="article.content"></div>
            </div>
            <div class="postfd">
              <div class="fd-item fl">
                <i class="iconfont icon-mianxing-yanjing fl"></i
                ><span class="fl">{{ article.readCount }}</span>
              </div>
              <div class="fd-item fl" @click="doLikeArticle(articleId)">
                <i class="iconfont icon-mianxing-dianzan fl"></i
                ><span class="fl">{{ article.goodCount }}</span>
              </div>
              <el-button
                v-show="isAdmin == 1"
                type="danger"
                icon="el-icon-delete"
                class="fr"
                size="small"
                style="margin-left: 10px"
                @click="withdrawArticle"
              ></el-button>
              <el-button
                type="primary"
                icon="el-icon-warning"
                class="fr"
                size="small"
                @click="infromPost"
              ></el-button>
            </div>
          </li>
        </ul>
      </div>
      <div class="appendArea" v-if="article.attachmentType == 1">
        <h3>附件</h3>
        <div class="appendFile">
          <ul>
            <li
              v-for="attachmentUrl in attachmentUrls"
              :key="attachmentUrl.fileName"
              class="fileItem"
            >
              <span class="fileName">{{ attachmentUrl.fileName }}</span>
              <!-- <span class="fileSize">11.2kb</span> -->
              <el-button type="success" plain size="mini" class="fr"
                ><a :href="attachmentUrl.fileUrl">下载</a></el-button
              >
            </li>
            <!-- <li class="fileItem">
              <span class="fileName">文件名11111</span>
              <span class="fileSize">11.2kb</span>
              <el-button type="success" plain size="mini" class="fr"
                >下载</el-button
              >
            </li> -->
          </ul>
        </div>
      </div>
      <div class="answerArea" v-show="article.questionType == 1">
        <!-- <el-button class="fl" type="info" @click="showAnswer"
          >展示答案</el-button
        > -->
        <h2 v-show="article.deadline > getTime()">
          答案揭晓时间 {{ article.deadline }}
        </h2>
        <p v-show="article.deadline < getTime()" class="answer">
          答案为：{{ article.answer }}
        </p>
      </div>
      <div class="commentArea">
        <div class="com-Area-top">
          <el-menu class="el-menu-demo comment-title" mode="horizontal">
            <h2
              class="fl"
              style="color: black; line-height: 60px; padding: 0 20px"
            >
              评论{{ comments.length }}
            </h2>
            <el-menu-item index="1">热评</el-menu-item>
            <el-menu-item index="2">最新</el-menu-item>
          </el-menu>
        </div>
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="发表评论">
            <el-input
              type="textarea"
              v-model="articleComment.content"
              placeholder="请输入你的评论内容"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="commentArticle">发表</el-button>
            <el-button>取消</el-button>
          </el-form-item>
        </el-form>
        <ul class="comment-container">
          <li
            v-for="all_comment in comments"
            :key="all_comment.comment.commentId"
            class="com-item clearfix"
          >
            <div class="com-left fl">
              <img
                class="com-sculpture"
                :src="
                  all_comment.avartUrl
                    ? all_comment.avartUrl
                    : 'https://yygh-zjut.oss-cn-hangzhou.aliyuncs.com/%E6%9C%AA%E7%99%BB%E5%BD%95.png'
                "
                @click="
                  toHomePage(all_comment.comment.userId, all_comment.identity)
                "
                alt=""
              />
            </div>
            <div class="com-right fl">
              <div class="commentContent clearfix">
                <div class="clearfix">
                  <h3 class="fl" style="color: #909399; font-weight: normal">
                    {{ all_comment.comment.nickName }}
                  </h3>
                  <div class="clearfix fl" v-show="1">
                    <img
                      v-if="all_comment.identity == 1"
                      class="fl"
                      src="@/assets/认证.png"
                      style="width: 15px; margin: 5px"
                      alt=""
                    />
                  </div>
                </div>
                <p class="comment-text">
                  {{ all_comment.comment.content }}
                </p>
                <span class="time fl">{{ all_comment.comment.postTime }}</span>
                <i
                  class="iconfont icon-mianxing-dianzan fl"
                  style="font-size: 20px; line-height: 20px; margin-left: 20px"
                  @click="doLikeComment(all_comment.comment.commentId)"
                ></i
                ><span class="fl">{{ all_comment.comment.goodCount }}</span>
                <i
                  class="iconfont icon-mianxing-duanxin fl"
                  style="font-size: 22px; line-height: 20px; margin-left: 20px"
                  @click="goToInput(all_comment.comment.userId, false)"
                ></i
                ><span class="fl"></span>
                <el-button
                  v-show="isAdmin == 1"
                  type="danger"
                  icon="el-icon-delete"
                  class="fr"
                  size="mini"
                  style="margin-left: 10px"
                  @click="withdrawByCommentId(all_comment.comment.commentId)"
                ></el-button>
                <el-button
                  type="primary"
                  icon="el-icon-warning"
                  class="fr"
                  size="mini"
                  @click="infromComment(all_comment.comment.commentId)"
                ></el-button>
              </div>
              <div class="sonComment">
                <ul>
                  <li
                    v-for="comment in all_comment.childComments"
                    :key="comment.commentId"
                    class="com-item clearfix"
                  >
                    <div class="com-left fl">
                      <img
                        class="com-sculpture"
                        :src="
                          comment.avartUrl
                            ? comment.avartUrl
                            : 'https://yygh-zjut.oss-cn-hangzhou.aliyuncs.com/%E6%9C%AA%E7%99%BB%E5%BD%95.png'
                        "
                        @click="
                          toHomePage(
                            comment.forumComment.userId,
                            comment.identity
                          )
                        "
                        alt=""
                      />
                    </div>
                    <div class="com-right fl">
                      <div class="commentContent clearfix">
                        <div>
                          <span class="fl" style="color: #909399">{{
                            comment.forumComment.nickName
                          }}</span>
                          <div class="clearfix fl" v-show="1">
                            <img
                              v-if="comment.identity == 1"
                              class="fl"
                              src="@/assets/认证.png"
                              style="width: 15px; margin: 5px"
                              alt=""
                            />
                          </div>
                          <span
                            style="
                              margin: 0 10px;
                              font-size: 13px;
                              line-height: 20px;
                            "
                            >回复</span
                          ><span style="color: #66b1ff">{{
                            comment.forumComment.replyNickName
                          }}</span>
                        </div>
                        <p class="comment-text">
                          {{ comment.forumComment.content }}
                        </p>
                        <span class="time fl">{{
                          comment.forumComment.postTime
                        }}</span>
                        <i
                          class="iconfont icon-mianxing-dianzan fl"
                          style="
                            font-size: 20px;
                            line-height: 20px;
                            margin-left: 20px;
                          "
                          @click="doLikeComment(comment.forumComment.commentId)"
                        ></i
                        ><span class="fl">{{
                          comment.forumComment.goodCount
                        }}</span>
                        <i
                          class="iconfont icon-mianxing-duanxin fl"
                          style="
                            font-size: 22px;
                            line-height: 20px;
                            margin-left: 20px;
                          "
                          @click="goToInput(comment.forumComment.userId, true)"
                        ></i
                        ><span class="fl"></span>
                        <el-button
                          v-show="isAdmin == 1"
                          type="danger"
                          icon="el-icon-delete"
                          class="fr"
                          size="mini"
                          style="margin-left: 10px"
                          @click="
                            withdrawByCommentId(comment.forumComment.commentId)
                          "
                        ></el-button>
                        <el-button
                          type="primary"
                          icon="el-icon-warning"
                          class="fr"
                          size="mini"
                          @click="infromComment(comment.commentId)"
                        ></el-button>
                      </div>
                    </div>
                  </li>
                </ul>
              </div>
              <!-- 这里把二级评论的输入框放在最后了 -->
              <div class="sonReply" style="width: 100%; padding: 10px 0">
                <el-form ref="form" :model="form" label-width="80px">
                  <el-form-item label="回复他">
                    <el-input
                      ref="clickReplyPosition"
                      type="textarea"
                      v-model="commentReply.content"
                    ></el-input>
                  </el-form-item>
                  <el-form-item>
                    <el-button
                      type="primary"
                      @click="commentComment(all_comment.comment.commentId)"
                      >回复</el-button
                    >
                    <el-button>取消</el-button>
                  </el-form-item>
                </el-form>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import forumApi from "@/api/forumApi";
import forumCommentApi from "@/api/forumCommentApi";
import adminControll from "@/api/adminControll";
export default {
  name: "lookpost",
  created() {
    if (sessionStorage.getItem("isLogin") == null) {
      this.isLogin = 0;
    }
    this.isAdmin = sessionStorage.getItem("isAdmin");
    if (this.$route.params && this.$route.params.articleId) {
      this.articleId = this.$route.params.articleId;
    } else {
      this.$message({
        message: "这篇文章好像出错了哦~",
        type: "error",
      });
      this.$router.push({
        path: "/",
      });
    }
    this.loadComments(this.articleId);
    this.getArticleDetail(this.articleId, 0);
  },

  data() {
    return {
      isLogin: 0,
      isAdmin: 1,
      articleId: "",
      article: {
        identity: 1,
        articleId: "U2zRa4cFPwLF4rR",
        pBoardId: 0,
        pBoardName: "话题广场",
        userId: "7437465925",
        nickName: "测试账号02",
        title: "38岁凤姐现状：异国他乡漂泊十年，孤苦无依，网友“自作自受”",
        tag: "摸鱼",
        content:
          '<p data-v-md-line="1">在贴吧和博客刚刚诞生的那几年，一位凹着“S型”造型的美女，横空出世，她就是来自陕西的芙蓉姐姐。<br>\r\n<img src="/api/file/getImage/202301/RxjFhBwN6XgR8Yy5V8po7UvkKoyK2W.png" alt="图片"><br>\r\n她以极其自恋的照片和无比自信的文字，在未名和水木的BBS上成为人尽皆知的红人。</p>\r\n<p data-v-md-line="5">2005年，有好事的网友将她的文字和照片转载到彼时火热的猫扑和天涯上，让她成为了全网皆知的红人。</p>\r\n<p data-v-md-line="7">无数人调侃她的长相，嘲讽她的舞姿，也有无数人坐等着她的博客更新。</p>\r\n<p data-v-md-line="9">一时间，她的新闻和热搜霸榜各大门户网站的娱乐版块。</p>\r\n<p data-v-md-line="11">她以”扮丑”和“低俗审美”的方式成为了许多无聊看客茶余饭后的谈资，也成了互联网上的“明星”。</p>\r\n<p data-v-md-line="13">4年后，来自重庆的罗玉凤试图以同样的方式完成从“素人”到“明星”的转变。<br>\r\n<img src="/api/file/getImage/202301/1RyNjXxTr2F5Kb7KnwPdWCbxiLQvu2.png" alt="图片"></p>\r\n',
        summary:
          "在贴吧和博客刚刚诞生的那几年，一位凹着“S型”造型的美女，横空出世，她就是来自陕西的芙蓉姐姐。",
        postTime: "2023-01-16 18:00:18",
        lastUpdateTime: "2023-02-08 03:21:04",
        readCount: 46,
        goodCount: 0,
        commentCount: 0,
        topType: 0,
        status: 1,
        attachmentType: 0,
        star: null,
        questionType: 1,
        answer: null,
        deadline: null,
      },
      attachmentUrls: [],
      form: {},
      articleComment: {
        pCommentId: 0,
        articleId: "当前文章的id",
        content: "评论内容",
        imgPath: "暂时不考虑",
      },
      commentReply: {
        pCommentId: null,
        articleId: "当前文章的id",
        content: "评论内容",
        imgPath: "暂时不考虑",
      },
      comments: [
        {
          comment: {
            identity: 1,
            commentId: "评论id",
            avartarUrl:
              "https://yygh-zjut.oss-cn-hangzhou.aliyuncs.com/76f62cf207906149ba614837eee3ae6e.jpg",
            nickName: "Xzh",
            commentTime: "2023-1-23 14:54",
            goodCount: 0,
            commentCount: 0,
            content: "你好呀",
          },
          childComments: [
            {
              identity: 1,
              commentId: "子评论id",
              avartarUrl:
                "https://yygh-zjut.oss-cn-hangzhou.aliyuncs.com/76f62cf207906149ba614837eee3ae6e.jpg",
              nickName: "Zyx",
              commentTime: "2023-1-23 14:54",
              goodCount: 0,
              commentCount: "评论数",
              content: "你好呀",
            },
          ],
        },
      ],
      //默认为空，当用户点击展示答案以后获取答案复制给answer
      answer: "",
      replyUserId: null,
    };
  },
  components: {},
  methods: {
    toHomePage(userId, identity) {
      this.$router.push({
        name: "mypost",
        params: {
          visitedUserId: userId,
          identity: identity,
        },
      });
    },
    loadComments(articleId) {
      forumCommentApi.loadComments(articleId).then((response) => {
        this.comments = response.data;
      });
    },
    getArticleDetail(articleId, forLike) {
      forumApi.getArticleDetail(articleId, forLike).then((response) => {
        this.article = response.data.forumArticle;
        this.article.avatarUrl = response.data.avatarUrl;
        this.article.identity = response.data.identity;
        this.article = this.packageArticle(this.article);
        for (var i = 0; i < response.data.attachmentUrls.length; i++) {
          var url = response.data.attachmentUrls[i];
          var _url = url.split("/");
          var urlName = _url[_url.length - 1];
          this.attachmentUrls.push({
            fileName: urlName,
            fileUrl: url,
          });
          console.log(this.attachmentUrls);
        }
      });
    },
    packageArticle(article) {
      var tags = article.tag.split(",");
      article.tag = tags;
      return article;
    },
    addComment(forumCommentVo) {
      forumCommentApi.addComment(forumCommentVo).then((response) => {
        this.loadComments(this.articleId);
      });
    },
    commentComment(pCommentId) {
      if (this.isLogin == 0) {
        this.$message({
          message: "您还未登陆，请登录后再发表评论哦~",
          type: "warning",
        });
        return;
      }
      this.commentReply.articleId = this.article.articleId;
      this.commentReply.replyUserId = this.replyUserId;
      this.replyUserId = null;
      this.commentReply.pCommentId = pCommentId;
      this.addComment(this.commentReply);
      this.commentReply = {
        articleId: null,
        pCommentId: null,
        content: "",
        replyUserId: null,
      };
    },
    commentArticle() {
      if (this.isLogin == 0) {
        this.$message({
          message: "您还未登陆，请登录后再发表评论哦~",
          type: "warning",
        });
        return;
      }
      this.articleComment.articleId = this.article.articleId;
      this.addComment(this.articleComment);
      this.articleComment = {
        pCommentId: 0,
        articleId: null,
        content: "",
      };
    },
    getPersonInfo() {
      personApi.getPersonInfo().then((response) => {
        this.identity = response.data[0].identity;
        if (this.identity == 0) {
          this.userInfo = response.data[0];
          this.userInfo.tags = this.userInfo.tags.split(",");
        } else {
          this.teacherInfo = response.data[0];
          this.teacherInfo.tags = this.teacherInfo.tags.split(",");
        }
      });
    },
    doLikeArticle(articleId) {
      forumApi.doLike(articleId).then((response) => {
        this.getArticleDetail(articleId, 1);
      });
    },
    //举报帖子
    infromPost() {
      this.$prompt("请输入举报信息", "举报详情", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then(({ value }) => {
          adminControll
            .saveArticleTipOff(this.articleId, value)
            .then((response) => {
              this.$message({
                type: "success",
                message: "举报成功",
              });
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消输入",
          });
        });
    },
    //举报评论
    infromComment(commentId) {
      this.$prompt("请输入举报信息", "举报详情", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then(({ value }) => {
          adminControll.saveCommentTipOff(commentId, value).then((response) => {
            this.$message({
              type: "success",
              message: "举报成功",
            });
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消输入",
          });
        });
    },
    //撤回文章
    withdrawArticle() {
      this.$alert("您确定撤回该文章吗", "撤回详情", {
        confirmButtonText: "确定",
        callback: (action) => {
          if (action == "confirm") {
            this.deleteByArticleId(this.articleId);
          }
        },
      });
    },
    deleteByArticleId(articleId) {
      adminControll.deleteByArticleId(articleId).then((response) => {
        this.$router.push({
          path: "/",
        });
      });
    },
    //撤回评论
    withdrawByCommentId(commentId) {
      this.$alert("您确定撤回该评论吗", "撤回详情", {
        confirmButtonText: "确定",
        callback: (action) => {
          if (action == "confirm") {
            this.deleteByCommentId(commentId);
          }
        },
      });
    },
    deleteByCommentId(commentId) {
      adminControll.deleteByCommentId(commentId).then((response) => {
        this.loadComments(this.articleId);
      });
    },

    getTime() {
      var _this = this;
      let yy = new Date().getFullYear();
      let mm = new Date().getMonth() + 1;
      let dd = new Date().getDate();
      let hh = new Date().getHours();
      let mf =
        new Date().getMinutes() < 10
          ? "0" + new Date().getMinutes()
          : new Date().getMinutes();
      let ss =
        new Date().getSeconds() < 10
          ? "0" + new Date().getSeconds()
          : new Date().getSeconds();
      _this.gettime = yy + "-" + mm + "-" + dd + " " + hh + ":" + mf + ":" + ss;
      return this.gettime;
    },

    doLikeComment(commentId) {
      forumCommentApi.doLikeComment(commentId).then((response) => {
        this.loadComments(this.articleId);
      });
    },
    goToInput(replyUserId, flag) {
      if (flag) {
        this.replyUserId = replyUserId;
      }
      this.$nextTick(() => this.$refs.clickReplyPosition.focus());
    },
  },
};
</script>

<style scoped>
.mybody {
  margin: 0 auto;
  width: 90%;
  /* background-color: pink; */
}

/*帖子内容区域 */
.postArea {
  margin: 0 auto;
  width: 80%;
  /* height: 500px; */
  padding: 5px 10px;
  padding-bottom: 10px;
  border-radius: 5px;
  background-color: white;
  box-shadow: 1px 0 2px rgba(0, 0, 0, 0.1);
}
.commentArea {
  margin: 0 auto;
  margin-top: 20px;
  width: 80%;
  min-height: 300px;
  padding: 10px 0;
  padding-right: 50px;
  border-radius: 5px;
  background-color: white;
  box-shadow: 1px 0 2px rgba(0, 0, 0, 0.1);
}

/*具体帖子*/
.inv-item {
  /* height: 450px; */
  color: rgba(0, 0, 0, 0.7);
  /* background: pink; */
  margin: 10px;
  padding: 5px 0;
}
/*帖子头部*/
.inv-item .hd {
  height: 60px;
  line-height: 40px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.3);
}
.inv-item .hd span {
  height: 16px;
  line-height: 16px;
  border-right: 1px solid rgba(0, 0, 0, 0.3);
  margin: 12px 0;
  padding: 0 8px;
}
#question {
  height: 20px;
  line-height: 10px;
  padding: 5px;
  margin-left: 20px;
  font-size: 10px;
  color: #007acc;
  border: 1px solid #007acc;
  border-radius: 3px;
}
.teacherShareTag {
  color: #f56c6c;
  background-color: #fef0f0;
  border: 1px solid #fde2e2;
  border-radius: 5px;
  padding: 0 10px;
}
.inv-img {
  height: 40px;
  width: 40px;
  border-radius: 20px;
}
/*帖子body*/
.inv-item .bd {
  min-height: 300px;
  margin: 10px 0;
  margin-bottom: 20px;
}
.inv-item h3 {
  font-size: 18px;
  color: black;
  margin-bottom: 15px;
}
/*帖子底部 */
.inv-item .postfd {
  height: 60px;
  padding-top: 20px;
  margin: 10px 0;
  border-top: 1px solid rgba(0, 0, 0, 0.2);
}
.fd-item {
  width: 80px;
  margin-right: 20px;
  line-height: 28px;
  /* background-color: pink; */
}

.inv-item .fd i {
  font-size: 20px;
  margin-right: 10px;
}
.icon-mianxing-dianzan:hover {
  cursor: pointer;
  font-size: 30px;
  color: #409eff;
}
.icon-mianxing-duanxin:hover {
  cursor: pointer;
  color: #409eff;
}

/*附件区域 */
.appendArea {
  /* margin: 0 auto; */
  margin-left: 50%;
  margin-top: 20px;
  width: 40%;
  min-height: 80px;
  padding: 10px 10px;
  padding-right: 50px;
  padding-bottom: 20px;
  border-radius: 5px;
  background-color: white;
  box-shadow: 1px 0 2px rgba(0, 0, 0, 0.1);
}
.fileItem {
  height: 20px;
  line-height: 20px;
  margin-top: 15px;
}
.fileName {
  font-weight: 700;
  font-size: 16px;
  color: #f56c6c;
}
.fileSize {
  margin: 0 10px;
}
/*提问帖答案区域*/
.answerArea {
  margin: 20px auto;
  min-height: 80px;
  width: 80%;
  padding: 20px;
  padding-right: 50px;
  padding-bottom: 20px;
  border-radius: 5px;
  background-color: white;
  box-shadow: 1px 0 2px rgba(0, 0, 0, 0.1);
}
.answer {
  margin-left: 20px;
  line-height: 40px;
}
/* 评论区域 */
.comment-title {
  margin-bottom: 20px;
}
.com-item {
  min-height: 100px;
  margin-left: 20px;
  margin-top: 20px;
  padding-bottom: 20px;
}
.com-left {
  width: 6%;
}
.com-sculpture {
  height: 50px;
  width: 50px;
  border-radius: 25px;
}
.com-right {
  /* height: 50px; */
  width: 94%;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
.comment-text {
  margin: 10px 0;
}
</style>
